<template>
	<div
		class="w100 h60 bgcfff bsbb"
		style="border: #e6e6e6 1px solid;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	padding: 0 0 1rem 0;
	"
	>
		<el-table
			:data="tableData"
			border
			v-loading="loading"
			height="34rem"
			style="width: 100%;margin-top: 0.5rem;"
			:header-cell-style="{ background: '#2F6BBB', color: '#FFFFFF', border: '#2F6BBB' }"
			:cell-style="{ border: '#ffffff' }"
			:row-style="{ height: '0.5rem' }"
		>
			<el-table-column prop="email" label="邮箱" align="center"></el-table-column>
			<el-table-column prop="mibile" label="电话" align="center"></el-table-column>
			<el-table-column prop="number" label="钻孔编号" align="center"></el-table-column>
			<el-table-column prop="username" label="用户" align="center"></el-table-column>
			<el-table-column prop="utime" label="时间" align="center" show-overflow-tooltip>
				<template slot-scope="scope">
					<span>{{ formatDate(scope.row.utime) }}</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" align="center" width="100">
				<template slot-scope="scope">
					<div class="c2f cp" @click="handleClick(scope.row)">查看</div>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<div style="height: 20rem;">
				<div class="top-reject">
					<img v-if="status.five == 0" src="../../assets/flow/reject.png" alt="" />
					<img v-else src="../../assets/flow/reject-c.png" alt="" />
				</div>
				<div class="flow">
					<!-- <img style="width: 6rem;height: 6rem;" src="../../assets/flow/bigen.png" alt="" /> -->
					<img style="width: 6rem;height: 6rem;" src="../../assets/flow/bigen-c.png" alt="" />
					<span class="lins-c">
						<div class="line">
							<span class="straight"></span>
							<span class="triangle"></span>
						</div>
					</span>
					<!-- <img style="width: 6rem;height: 6rem;" src="../../assets/flow/submitter.png" alt="" /> -->
					<img style="width: 6rem;height: 6rem;" src="../../assets/flow/submitter-c.png" alt="" />
					<span :class="status.one == 0 ? 'lins' : 'lins-c'">
						<div class="line">
							<span class="straight"></span>
							<span class="triangle"></span>
						</div>
						<div class="font-line">提交审核</div>
					</span>
					<img v-if="status.one == 0" style="width: 6rem;height: 6rem;" src="../../assets/flow/yuan.png" alt="" />
					<img v-else style="width: 6rem;height: 6rem;" src="../../assets/flow/yuan-c.png" alt="" />
					<span :class="status.two == 0 ? 'lins' : 'lins-c'">
						<div class="line">
							<span class="straight"></span>
							<span class="triangle"></span>
						</div>
						<div class="font-line">审核通过</div>
					</span>
					<img v-if="status.two == 0" style="width: 6rem;height: 6rem;" src="../../assets/flow/ju.png" alt="" />
					<img v-else style="width: 6rem;height: 6rem;" src="../../assets/flow/ju-c.png" alt="" />
					<span :class="status.three == 0 ? 'lins' : 'lins-c'">
						<div class="line">
							<span class="straight"></span>
							<span class="triangle"></span>
						</div>
						<div class="font-line">审核通过</div>
					</span>
					<img v-if="status.three == 0" style="width: 6rem;height: 6rem;" src="../../assets/flow/end.png" alt="" />
					<img v-else style="width: 6rem;height: 6rem;" src="../../assets/flow/end-c.png" alt="" />
				</div>
				<div class="bottom-reject">
					<img v-if="status.four == 0" src="../../assets/flow/bottom-reject.png" alt="" />
					<img v-else src="../../assets/flow/bottom-reject-c.png" alt="" />
				</div>
			</div>
			<span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
		</el-dialog>
	</div>
</template>

<script>
import { flowChartList, flowChart } from '@/api/user.js';
export default {
	name: '',
	data() {
		return {
			tableData: [],
			loading: false,
			dialogVisible: false,
			status: {
				one: 0,
				two: 0,
				three: 0,
				four: 0,
				five: 0
			}
		};
	},
	watch: {
		$route: {
			handler() {
				//监听参数变化时去请求
				this.getList(this.$route.query.id);
				//深度监听，同时也可监听到query参数变化
			},
			deep: true
		}
	},
	created() {
		this.getList(this.$route.query.id);
	},
	methods: {
		getList(val){
			this.loading = true;
			flowChartList(parseInt(val)).then(res => {
				this.loading = false;
				this.tableData = res.data;
			});
		},
		handleClose() {
			this.dialogVisible = false;
		},
		handleClick(row) {
			flowChart(row.hid).then(res => {
				if (res.code == 1001) {
					this.dialogVisible = true;
					this.status = res.data;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.top-reject {
	position: absolute;
	top: 8rem;
	left: 16.25rem;
	img {
		width: 27rem;
		height: 4rem;
	}
}
.flow {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	.lins {
		display: inline-block;
		padding: 0 0.3rem;
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		color: rgb(153, 153, 153);
		font-weight: bold;
		font-size: 0.9rem;
		.line {
			display: flex;
			align-items: center;
			.straight {
				display: inline-block;
				width: 5rem;
				height: 0.4rem;
				background-color: rgb(153, 153, 153);
			}
			.triangle {
				width: 0;
				height: 0;
				overflow: hidden;
				font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
				line-height: 2px; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
				border-width: 10px;
				border-style: solid; /*ie6下会出现不透明的兼容问题*/
				border-color: transparent transparent transparent rgb(153, 153, 153);
			}
		}
	}
	.lins-c {
		display: inline-block;
		padding: 0 0.3rem;
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		color: #1264b6;
		font-weight: bold;
		font-size: 0.9rem;
		.line {
			display: flex;
			align-items: center;
			.straight {
				display: inline-block;
				width: 5rem;
				height: 0.4rem;
				background-color: #1264b6;
			}
			.triangle {
				width: 0;
				height: 0;
				overflow: hidden;
				font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
				line-height: 2px; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
				border-width: 10px;
				border-style: solid; /*ie6下会出现不透明的兼容问题*/
				border-color: transparent transparent transparent #1264b6;
			}
		}
	}
}
.bottom-reject {
	position: absolute;
	top: 18.5rem;
	left: 16.25rem;
	img {
		width: 14rem;
		height: 4rem;
	}
}
.el-button {
	width: 7rem !important;
}
.el-table {
	margin: 0 !important;
	border-radius: 8px;
}
</style>
